/*
 * @Author: along
 * @Date: 2019-12-16 10:22:36
 */

<template>
    <div class="container workPeter">
        <!-- head -->
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="fnAddPeter()"
                size="small">添加金刚区
            </el-button>

            <div class="operation-content">
                <p class="operation-container-title">金刚区名称:</p>
                <el-input
                    v-model="peter_name"
                    placeholder="请输入金刚区名称"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
        </div>
        <!-- /head -->

        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="image_url"
                        show-overflow-tooltip
                        label="金刚区logo"
                        :formatter="emptyFormatter"
                        align="center"
                        :width="110"
                    >
                        <template slot-scope="scope">
                            <img
                                class="sub-logo"
                                :src="scope.row.image_url"
                                alt="">
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        show-overflow-tooltip
                        label="金刚区名称"
                        :formatter="emptyFormatter"
                        align="center"
                        :width="110"
                    />
                    <el-table-column
                        prop="sort"
                        label="排序"
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="sort-wrap">
                                {{ scope.row.sort }}
                                <span class="sort-spliter" />
                                <el-button
                                    type="text"
                                    class="btn-sort"
                                    style="color: #606266"
                                    @click="fnEditSort(scope.row)"
                                >
                                    <i class="el-icon-edit" />
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        show-overflow-tooltip
                        label="状态"
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.status == 1">已启用</template>
                            <template v-if="scope.row.status == 0">已隐藏</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        min-width="140"
                        label="创建时间"
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.create_time">{{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                            <template v-else>--</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        :width="140"
                        fixed="right"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnEditClassify(scope.row)">编辑</el-button>
                                <el-button
                                    type="text"
                                    @click="fnChangeClassifyStatus(scope.row)">
                                    <span v-if="scope.row.status == 0">启用</span>
                                    <span v-if="scope.row.status == 1">隐藏</span>
                                </el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnDelMaterial(scope.row)">
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 添加金刚区弹窗 -->
        <el-dialog
            title="添加金刚区"
            width="610px"
            :visible.sync="dialogAddVisible">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="90px"
                class="demo-ruleForm">
                <el-form-item
                    label="金刚区名称"
                    prop="cate_name">
                    <el-input
                        v-model="ruleForm.cate_name"
                        class="add-dialog-input"
                        size="small"
                    />
                </el-form-item>

                <el-form-item
                    label="图标"
                    prop="cate_logo">
                    <el-upload
                        :show-file-list="false"
                        :http-request="e=> {fnUploadImageOfGoods(e, true)}"
                        accept="image/*"
                        class="upload-good-image"
                        action="https://jsonplaceholder.typicode.com/posts/"
                    >
                        <img
                            v-if="ruleForm.cate_logo"
                            :src="ruleForm.cate_logo"
                            class="avatar">
                        <p
                            class="upload-hide"
                            v-else
                        >
                            <i class="el-icon-plus"/>
                        </p>
                    </el-upload>
                </el-form-item>
                <!-- banner跳转 -->
                <el-row
                    class='row-flex'
                    style="display:flex"
                >
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="跳转链接:"
                    >
                        <el-cascader
                            :props="{ expandTrigger: 'hover' }"
                            :placeholder="setJump"
                            size="small"
                            :filterable="true"
                            v-model="ruleForm.app_action"
                            :options="linkSelectData"
                            @change="handleChange()"
                            ref="myCascader"
                            style="width:351px"
                        />
                    </el-form-item>
                    <span
                        style="color:#409EFF;cursor:pointer;margin:8px 0 0 10px"
                        @click="fnClearApp()"
                    >{{ paramCont.length > 0 ? '清空链接' : '' }}</span>
                </el-row>
                <el-form-item
                    size="small"
                >
                    <!-- 外链输入框 -->
                    <div
                        v-for="(item,index) in param"
                        :key="index"
                    >
                        <div v-if="item.type == 'text'">
                            <el-input
                                placeholder="请输入链接"
                                style="width: 300px"
                                v-model="ruleForm.jump_url"
                                @input="getJump"
                                clearable
                            >
                                <template
                                    class="param"
                                    slot="prepend">{{ item.title }}</template>
                            </el-input>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                    </div>
                    <!-- 外链输入框 -->

                    <!-- 内链选择框 -->
                    <div
                        v-for="(item,index) in paramCont"
                        :key="index"
                    >
                        <div
                            v-if="paramCont.length == 2 "
                            style="display:flex;marginBottom: 10px"
                        >
                            <p class="el-select-title">{{ item.title }}</p>
                            <el-select
                                v-model="list[index]"
                                filterable
                                placeholder="请选择"
                                @change="getLink"
                                style="marginLeft: -5px;width:239px"
                            >
                                <el-option
                                    v-for="item in options[index]"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value"/>
                            </el-select>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                        <div
                            v-if="item.type == 'select' && paramCont.length == 1 "
                            style="display:flex;marginBottom: 10px"
                        >
                            <p class="el-select-title">{{ item.title }}</p>
                            <el-select
                                v-model="ruleForm.jump_url"
                                filterable
                                placeholder="请选择"
                                @change="getJump"
                                style="marginLeft: -5px;width:239px"
                            >
                                <el-option
                                    v-for="item in options[index]"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value"/>
                            </el-select>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                        <div v-if="item.type == 'text'">
                            <el-input
                                placeholder="请输入链接"
                                style="width: 300px"
                                v-model="ruleForm.jump_url"
                                @input="getJump"
                                clearable
                            >
                                <template
                                    class="param"
                                    slot="prepend">{{ item.title }}</template>
                            </el-input>
                            <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                        </div>
                    </div>
                    <!-- 内链输入框 -->
                </el-form-item>
                <!-- banner跳转 -->
                <el-form-item
                    label="排序号"
                    prop="cate_sort"
                    size="small"
                >
                    <el-input
                        v-model="ruleForm.cate_sort"
                        type="number"
                        class="add-dialog-input"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="dialogAddVisible = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加金刚区弹窗 -->

        <!-- 分页 -->
        <div class="pagination-wrapper clearfix">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData" />
        </div>
        <!-- 分页 -->

        <img-preview ref="preview" />
    </div>
</template>

<script>
/**
 * @param   {Object}    authResult                  //页面权限
 * @param   {Array}     tableData                   //表格数据
 * @param   {Object}    page                        //分页
 * @param   {Boolean}   dialogAddVisible            //弹窗开关
 * @param   {Object}    ruleForm                    //弹窗字段
 * @param   {Object}    rules                       //弹窗字段
 * @param   {String}    peter_name                  //金刚区名称
 * @param   {Object}    filterData                  //排序
 * @param   {String}    type_popup                  //打开弹窗类型-编辑/添加
 * @param   {String}    pathName                    //上一页路由name
 * @param   {String}    area_no                     //编号，用于编辑
 */
import imgPreview from '@/components/common/img-preview';
export default {
    components: {
        imgPreview
    },
    data() {
        var checkTypeLogo = (rule, value, callback) => {
            if (this.ruleForm.cate_logo == '') {
                return callback(new Error('请上传图标,不可以为空'));
            }else{
                callback();
            }
        };

        return {
            area_no: '',
            pathName: '',
            type_popup: '',
            authResult: {},
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            dialogAddVisible: false,
            ruleForm: {
                cate_name: '',
                cate_sort: '',
                cate_no: '',
                cate_logo: '',
                app_action: '',
                jump_url: '',
                form_name: ''
            },
            rules: {
                cate_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择课程分类', trigger: 'change' }
                ],
                cate_logo: [
                    {validator: checkTypeLogo, trigger: 'blur'}
                ],
                app_action: [
                    { required: true, message: '请选择跳转链接,不可以为空', trigger: 'change' }
                ],
                jump_url: [
                    { required: true, message: '请选择跳转链接,不可以为空', trigger: 'change' }
                ],
                cate_sort: [
                    { required: true, message: '请输入排序号,不可以为空', trigger: 'change' }
                ]
            },
            peter_name: '',
            setJump: '请选择',
            list: [],
            link: '',
            param: [],
            paramCont: [],
            options: [],
            linkSelectData: [],
            isapp: true
        };
    },
    watch: {
        dialogAddVisible (val) {
            if (!val) {
                this.isapp = true;
                this.paramCont = [];
                this.ruleForm = {
                    cate_name: '',
                    cate_sort: '',
                    cate_no: '',
                    cate_logo: '',
                    app_action: '',
                    jump_url: ''
                };
                this.$refs['ruleForm'].resetFields();
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.pathName = from.name;
        });
    },
    mounted() {
        this.authResult = this.$route.meta.authResult;
        this.setHeader();
        this.fnRecord();
        this.getTableData();
        this.getappAcion();
    },
    destroyed(){
        window.removeEventListener('popstate', this.fnGoBack, false);
    },
    methods: {
        /**
         * 设置heade
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{title: "APP后台",},{title: '学习'},{title: '金刚区'}]);
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/student/study_custom_area%5Cget_list', {
                page_id: page || this.page.now_page,
                keyword: this.peter_name
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 记录上一页路由,监听页面返回并重定向
         */
        fnRecord () {
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.fnGoBack, false);
            }
        },

        /**
         * 上一页重定向
         */
        fnGoBack  () {
            this.$router.replace({ name: this.pathName });
        },

        /**
         * 清空链接
         */
        fnClearApp () {
            this.ruleForm.app_action = this.ruleForm.jump_url = '';
            this.list = [];
            this.link = '';
        },

        /**
         * app行为数据处理
         */
        getappAcion () {
            let arr = [];
            let param = '';
            let val = '';

            this.$post('/student/app_action%5Cget_cascade_list', {
            }, resp => {
                if (resp.code == 1) {
                    resp.data.list.map((item,index)=>{
                        arr.push({
                            value: item.action,
                            label: item.title,
                            children: []
                        });
                        item.target_list.map((itm, idx) => {
                            val = {
                                target: itm.target,
                                param: []
                            };
                            itm.param_list.map((option,i)=> {
                                val.param.push({
                                    param: option.param,
                                    title: option.title,
                                    type: option.form_type
                                });
                            });
                            arr[index].children.push({
                                value: JSON.stringify(val),
                                label: itm.title
                            });
                        });
                    });
                }
                this.linkSelectData = arr;
            });
        },

        /**
         * app链接数据处理
         */
        handleChange () {
            let app_action = this.ruleForm.app_action;
            let obj = JSON.parse(app_action[1]);
            let link = {
                action: '',
                target: '',
                param: {}
            };
            let param = [];

            this.ruleForm.form_name = '';
            this.$set(this.ruleForm, 'jump_url', '');

            if (app_action[0] == 'app_page') { //内部链接
                let param_list = obj.param;

                this.param = this.paramCont = this.list = [];

                if (param_list.length == 1) {
                    for(let i in param_list) {
                        param.push(
                            param_list[i]
                        );
                    }
                    this.list = [''];
                } else if (param_list.length == 2) {
                    param_list.map(item=>{
                        param.push({
                            type: 'select',
                            param: item.param,
                            title: item.title,
                            target: obj['target']
                        });
                    });
                    this.list = ['',''];
                }

                this.paramCont = param;

                if (this.paramCont.length == 0) {
                    this.link = {
                        action: app_action[0],
                        target: JSON.parse(app_action[1]).target,
                        param: {}
                    };
                    return;
                }

                this.options = [];
                this.paramCont.map((item,index)=>{
                    if (item.type == 'select') {
                        this.$post('/student/app_action%5Cget_param_item_list',{
                            action: 'app_page',
                            target: obj['target'],
                            param: item.param
                        },resp => {
                            if (resp.code == 1 ) {
                                if (this.paramCont.length == 1) {
                                    this.options.push(
                                        resp.data.list
                                    );
                                } else if (this.paramCont.length == 2){ // 设置顺序
                                    if (item.param == 'form_no') {
                                        this.options.push(
                                            resp.data.list
                                        );
                                    }
                                    if (item.param == 'scene_key') {
                                        setTimeout(()=>{
                                            this.options.push(
                                                resp.data.list
                                            );
                                        },200);
                                    }
                                }
                            } else if (resp.code == 0) {
                                this.options = [];
                            }
                        });
                        link.param[[item['param']]] = this.ruleForm.jump_url;
                    }
                    if (item.type == 'text') {
                        link.param[[item['param']]] = this.ruleForm.form_name;
                    }

                    link.action = app_action[0];
                    link.target = obj['target'];
                });
            } else if (app_action[0] == 'link_outer') { //外部链接
                this.paramCont = [];
                this.ifSelect = 'text';
                this.param = obj.param;

                //链接赋值
                link = {
                    action: app_action[0],
                    target: obj['target'],
                    param: {
                        url : this.ruleForm.jump_url
                    }
                };
            } else {
                return;
            }
            this.link = link;
        },

        /**
         * @abstract  单链接text_select处理
         */
        getJump (url) {
            let param = {};

            this.$set(this.ruleForm, 'jump_url', url);
            for(let key in this.link['param']) {
                param[key] = url;
            }

            this.link['param'] = param;
            console.log(JSON.stringify(this.link), 'app_action');
        },

        /**
         * @abstract  双链接select处理
         */
        getLink () {
            let param = {};

            //保证param字段不重复，否则值会被覆盖
            this.paramCont.map((item,index)=>{
                param[item.param] = this.list[index];
            });

            this.link['param'] = param;
            console.log(JSON.stringify(this.link), 'app_action');
        },

        /**
         * 修改排序
         */
        fnEditSort(row) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(0|\+?[1-9][0-9]*)$/,
                inputPlaceholder: '请输入序号',
                inputErrorMessage: '请输入正整数',
                closeOnClickModal: false,
            }).then(({ value }) => {
                this.$post('/student/study_custom_area%5Cset', {
                    area_no: row.area_no,
                    sort: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '修改成功',
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 上传图片
         */
        fnUploadImageOfGoods(e) {
            this.fnUploadImage(e, (resp) => {
                this.ruleForm.cate_logo = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },

        /**
         * 添加分类
         */
        fnAddPeter () {
            this.type_popup = 'addCategory';
            this.dialogAddVisible = !this.dialogAddVisible;
        },

        /**
         * 编辑
         */
        fnEditClassify(row) {
            this.type_popup = 'editCategory';
            this.area_no = row.area_no;
            this.$post('/student/study_custom_area%5Cget', {
                area_no: row.area_no
            }, resp => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        cate_name: resp.data.title,
                        cate_logo: resp.data.image_url,
                        cate_sort: resp.data.sort
                    };

                    if (resp.data.app_action == '') {
                        return;
                    }

                    if(JSON.stringify(JSON.parse(resp.data.app_action).param) == '{}') {
                        this.setUrlData(JSON.parse(resp.data.app_action));

                        setTimeout(()=>{
                            this.dialogAddVisible = !this.dialogAddVisible;
                        },100);
                        return;
                    }

                    let app_action = JSON.parse(resp.data.app_action);
                    let app = [];

                    this.$post('/student/app_action%5Cget_cascade_list', {}, resp => {
                        if (resp.code == 1) {
                            resp.data.list.map(item => {
                                if (app_action.action == 'link_outer') {
                                    item.target_list.map(itm => {
                                        if (itm.target == app_action.target) {
                                            app.push(
                                                app_action.action,
                                                JSON.stringify({
                                                    target: app_action.target,
                                                    param: [{
                                                        param: itm.param_list[0].param,
                                                        title: itm.param_list[0].title,
                                                        type: itm.param_list[0].form_type
                                                    }]
                                                })
                                            );
                                            this.setApp_action(app,itm.param_list[0].title,app_action.param.url,itm.target);
                                        }
                                    });
                                }

                                if (app_action.action == 'app_page') {
                                    let length = Object.keys(app_action.param).length;

                                    app = [];
                                    app.push(
                                        app_action.action,{
                                            target: app_action.target,
                                            param: []
                                        }
                                    );
                                    item.target_list.map((itm,idx) => {
                                        if (itm.target == app_action.target) {
                                            itm.param_list.map((option,i) => {
                                                app[1].param.push({
                                                    param: option.param,
                                                    title: option.title,
                                                    type: option.form_type
                                                });
                                            });
                                        }
                                    });
                                    setTimeout(()=>{
                                        if (this.isapp) {
                                            this.setSelect_action(app,length,app_action.param);
                                            this.isapp = false;
                                        }
                                    },50);
                                } else {
                                    return;
                                }
                            });
                        }
                    });

                    setTimeout(()=>{
                        this.dialogAddVisible = !this.dialogAddVisible;
                    },100);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * param空回填
         */
        setUrlData (url) {
            console.log(url);
            this.paramCont = [];
            this.ruleForm.app_action = [
                "app_page",
                JSON.stringify({
                    target : url.target,
                    param: []
                })
            ];
            this.link = {
                action :"app_page",
                target : url.target,
                param: {}
            };
        },

        /**
         * select
         */
        setSelect_action (app,length,url) {
            if (length == 1) {
                let list = JSON.parse(JSON.stringify(app));
                let param = JSON.stringify(app[1]);

                this.paramCont = [{
                    type: list[1].param[0]['type'],
                    title: list[1].param[0]['title']
                }];
                list[1] = param;
                this.ruleForm.app_action = list;
                this.options = [];
                for(let i in url) {
                    this.$post('/student/app_action%5Cget_param_item_list',{
                        action: 'app_page',
                        target: JSON.parse(list[1]).target,
                        param: i
                    },resp => {
                        if (resp.code == 1 ) {
                            this.options.push(
                                resp.data.list,
                            );
                        } else if (resp.code == 0) {
                            this.options = [];
                        }
                    });
                    this.$set(this.ruleForm, 'jump_url', url[i]);
                    this.link = {
                        "action":"app_page",
                        "target":JSON.parse(list[1]).target,
                        "param":{
                            [i]: url[i]
                        }
                    };
                }
            } else if (length == 2) {
                let data = JSON.parse(JSON.stringify(app));
                let params = JSON.stringify(app[1]);
                let current = [];

                app[1] = params;
                this.ruleForm.app_action = app;

                this.paramCont = [];
                this.list = [];

                if (typeof(data[1]['param']) == 'object') {
                    data[1]['param'].map((item,index)=>{
                        this.paramCont.push({
                            type: 'select',
                            title: item.title,
                            param: item.param,
                            target: data[1].target
                        });
                    });
                }

                this.options = [];
                for(let i in url) {
                    this.$post('/student/app_action%5Cget_param_item_list',{
                        action: 'app_page',
                        target: data[1].target,
                        param: i
                    },resp => {
                        if (resp.code == 1 ) {
                            if (i == 'form_no') {
                                this.options.push(
                                    resp.data.list,
                                );
                            }
                            if (i == 'scene_key') {
                                setTimeout(()=>{
                                    this.options.push(
                                        resp.data.list,
                                    );
                                },200);
                            }
                        } else if (resp.code == 0) {
                            this.options = [];
                        }
                    });
                    this.link = {
                        action :"app_page",
                        target : data[1].target,
                        param : url
                    };
                    this.list.push(url[i]);
                }
            }
        },

        /**
         * link_outer
         */
        setApp_action (app,title,url,target) {
            this.ruleForm.app_action = app;
            this.$set(this.ruleForm, 'jump_url', url);
            this.param = [{
                type: 'text',
                title: title
            }];
            this.link = {"action":"link_outer","target":target,"param":{"url":url}};
        },
        // {"action":"app_page","target":"custom_form_custom_scene","param":{"form_no":"fm_5507cab254059","scene_key":"掌大精英可见"}}

        /**
         * 弹窗确认提交数据
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.type_popup == 'addCategory') {
                        this.$post('/student/study_custom_area%5Cadd', {
                            title: this.ruleForm.cate_name,
                            image_url: this.ruleForm.cate_logo,
                            app_action: JSON.stringify(this.link),
                            sort: this.ruleForm.cate_sort
                        }, resp => {
                            if (resp.code == 1) {
                                this.getTableData();
                                this.dialogAddVisible = !this.dialogAddVisible;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功',
                                    center: true
                                });
                            }else{
                                this.$message({
                                    type: 'warning',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    } else if (this.type_popup == 'editCategory') {
                        this.$post('/student/study_custom_area%5Cset', {
                            area_no: this.area_no,
                            title: this.ruleForm.cate_name,
                            image_url: this.ruleForm.cate_logo,
                            app_action: JSON.stringify(this.link),
                            sort: this.ruleForm.cate_sort
                        }, resp => {
                            if (resp.code == 1) {
                                this.getTableData();
                                this.dialogAddVisible = !this.dialogAddVisible;
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功',
                                    center: true
                                });
                            }else{
                                this.$message({
                                    type: 'warning',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },

        /**
         * 设置状态
         */
        fnChangeClassifyStatus(row) {
            this.$post('/student/study_custom_area%5Cset_status', {
                area_no: row.area_no,
                status: row.status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData(this.page.now_page);
                    this.$message({
                        type: 'success',
                        message: '设置成功',
                        center: true
                    });
                }
            });
        },

        /**
         * 删除
         */
        fnDelMaterial(row) {
            this.$confirm('删除将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/study_custom_area%5Cdelete', {
                    area_no: row.area_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
}
.add-dialog-input{
    width: 350px;
}
.operation-wrapper {
    display: flex;
    background-color: #fff;
    height: 32px;
    align-items: center;
    margin-top: 10px;
    .select-container{
        flex: 1;
    }
    .el-button {
        float: right;
        margin-left: 10px;
    }
    .operation-content {
        display: flex;
        height: 32px;
        align-items: center;
        margin-left: 30px;
        .operation-container-title {
            color: #606266;
            white-space: nowrap;
            margin-right: 3px;
        }
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .sub-logo{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .num-active {
        color:#FF0000;
    }
}
.pagination-wrapper {
    padding-bottom: 15px;
    .el-pagination {
        float: right;
        margin-right: 20px;
        padding: 0;
        background-color: transparent;
    }
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-select-title {
    display: inline-block;
    color: #909399;
    background: #F5F7FA;
    padding: 0 18px;
    border: 1px solid #DCDFE6;
    border-radius: 4px 0 0 4px;
    border-right: none;
    height: 32px;
    white-space: nowrap;
}
</style>
<style lang="less">
.workPeter {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
            justify-content: center;
        }
    }
    .upload-good-image{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        display: flex;
        border: 1px dashed #d9d9d9;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #8c939d;
        img{
            width: 100px;
            height: 100px;
        }
        .upload-hide {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
